<template>
  <!--  搜索栏 -->
  <div class="app-container">
    <basic-search-form
      ref="vBasicSearchForm"
      style="margin-bottom: 8px"
      :columns="columns"
      inline
      size="small"
      @search="serach"
    >
    </basic-search-form>
    <!-- 表格 -->
    <basic-table
      ref="vBasicTable"
      :api="businessesList"
      :before-fetch="beforeFetch"
      :immediate-fetch="false"
      :table-schema="tableSchema"
      :actions="tableActions"
      :table-prop="tableProp"
      :row-info="{
        rowKey: 'data',
      }"
    >
      <template #cityCode="{ row }">
        <span>{{ row.province + row.city }}</span>
      </template>
      <template #relatedWharf="{ row }">
        <span>码头：{{ row.wharfCount }}</span>
      </template>
      <!-- 表格上方按钮-->
      <template #tableHead="{ total }">
        <div>商户统计：{{ total }}个</div>
        <div style="height: 32px">
          <el-button size="mini" type="primary" @click="addBusinesses">新建商户</el-button>
          <el-button size="mini" @click="handleExport">导出EXCEL</el-button>
        </div>
      </template>
    </basic-table>
    <save-dialog
      :initial-data="dialog.data"
      :dialog-title="dialog.title"
      :is-editing="dialog.isEditing"
      :is-visible.sync="dialog.show"
      @close="handleDialogClose"
      @dialogCallBack="handleDialogCallback"
    />
  </div>
</template>

<script>
import { searchColumns, tableActions, tableSchema } from '@/views/businesses/businesses/modal.data';
import { download } from '@/utils/request';
import { businessesPageList } from '@/api/businesses';
import SaveDialog from './components/SaveDialog.vue';

export default {
  components: { SaveDialog },
  data() {
    return {
      columns: searchColumns(this),
      tableSchema: tableSchema,
      tableActions: tableActions(this.updateBusinesses, this.deleteBusinesses),
      tableProp: {},
      queryParams: {},
      detail: {},
      dialog: {
        show: false,
        title: '',
        data: {},
        isEditing: false,
      },
    };
  },
  // computed: {
  //
  // },
  mounted() {
    this.$refs.vBasicSearchForm.search();
  },
  methods: {
    businessesList: businessesPageList,
    serach(form) {
      this.queryParams = { ...form };
      this.$refs.vBasicTable.fetch();
    },
    beforeFetch() {
      return this.queryParams;
    },
    /**
     * 导出
     */
    handleExport() {
      download(
        '/businesses/export',
        { ...this.queryParams },
        `商户列表_${new Date().getTime()}.xlsx`,
      );
    },
    addBusinesses() {
      this.dialog.show = true;
      this.dialog.title = '新增商户';
      this.dialog.isEditing = false;
      this.dialog.data = {};
    },
    updateBusinesses(row) {
      this.dialog.show = true;
      this.dialog.title = '编辑商户';
      this.dialog.isEditing = true;
      this.dialog.data = { ...row };
    },
    handleDialogClose() {
      this.dialog.show = false;
    },
    handleDialogCallback() {
      this.dialog.show = false;
      this.$refs.vBasicTable.fetch();
    },
    deleteBusinesses(id) {},
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f1f1f1;
}
</style>
